// @ts-nocheck
import React from 'react';
import { Dropdown, Menu } from 'antd';
import type { ClickParam } from 'antd/es/menu';
import { useTranslation } from 'react-i18next';
import type { HeaderDropdownProps, LanguageItem } from '@/components/SelectLang/typing';

const HeaderDropdown: React.FC<HeaderDropdownProps> = ({ overlayClassName: cls, ...restProps }) => (
  <Dropdown overlayClassName={cls} {...restProps} />
);

interface LocalData {
  lang: string;
  label?: string;
  icon?: string;
  title?: string;
}

interface SelectLangProps {
  globalIconClassName?: string;
  postLocalesData?: (locales: LocalData[]) => LocalData[];
  onItemClick?: (params: ClickParam) => void;
  className?: string;
  /**
   * 可选语言列表
   */
  languageList?: LanguageItem[];
}

export const SelectLang: React.FC<SelectLangProps> = (props) => {
  const {
    globalIconClassName,
    postLocalesData,
    onItemClick,
    style,
    languageList,
    ...restProps
  } = props;
  const languageArr = languageList || [{ name: '简体中文', code: 'zh-CN' }];
  const { i18n } = useTranslation();
  const selectedLang = i18n.language || languageArr[0].code;

  const changeLang = ({ key }: ClickParam): void => {
    i18n.changeLanguage(key);
  };

  const handleClick = onItemClick
    ? (params: ClickParam) => {
        onItemClick(params);
        changeLang(params);
      }
    : changeLang;

  const menuItemStyle = { minWidth: '160px' };

  const menuItems = languageArr.map((item) => (
    <Menu.Item key={item.code} style={menuItemStyle}>
      {item.name}
    </Menu.Item>
  ));
  const langMenu = (
    <Menu selectedKeys={[selectedLang]} onClick={handleClick}>
      {menuItems}
    </Menu>
  );

  const inlineStyle = {
    cursor: 'pointer',
    padding: '12px',
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: 18,
    verticalAlign: 'middle',
    ...style
  };

  return (
    <HeaderDropdown overlay={langMenu} placement="bottomRight" {...restProps}>
      <span className={globalIconClassName} style={inlineStyle}>
        <i className="anticon">
          <svg
            viewBox="0 0 24 24"
            focusable="false"
            width="1em"
            height="1em"
            fill="currentColor"
            aria-hidden="true"
          >
            <path d="M0 0h24v24H0z" fill="none" />
            <path
              d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z "
              className="css-c4d79v"
            />
          </svg>
        </i>
      </span>
    </HeaderDropdown>
  );
  return <></>;
};
